<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev" :class="{ disabled: pageNo == 1 }">
          <button
            :disabled="pageNo == 1"
            @click="$emit('changPageNum', pageNo - 1)"
          >
            <i class="iconfont icon-pre"></i> 上一页
          </button>
        </li>
        <!-- 左 -->
        <li :class="{ active: pageNo == 1 }" v-if="midStartEnd[0] > 1">
          <button @click="$emit('changPageNum', 1)">1</button>
        </li>
        <li class="dotted" v-if="midStartEnd[0] > 2">
          <i class="iconfont icon-dots"></i>
        </li>
        <!-- 中 -->
        <li
          v-for="number in midStartEnd"
          :key="number"
          :class="{ active: pageNo == number }"
        >
          <button @click="$emit('changPageNum', number)">{{ number }}</button>
        </li>
        <li
          class="dotted"
          v-if="midStartEnd[midStartEnd.length - 1] < totalPages - 1"
        >
          <i class="iconfont icon-dots"></i>
        </li>
        <!-- 右 -->
        <li
          v-if="midStartEnd[midStartEnd.length - 1] < totalPages"
          :class="{ active: pageNo == totalPages }"
        >
          <button @click="$emit('changPageNum', totalPages)">
            {{ totalPages }}
          </button>
        </li>
        <li class="next" :class="{ disabled: pageNo == totalPages }">
          <button
            :disabled="pageNo == totalPages"
            @click="$emit('changPageNum', pageNo + 1)"
          >
            下一页 <i class="iconfont icon-next"></i>
          </button>
        </li>
        <li class="next disabled">
          <button disabled>共{{ totalPages }}页</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  total: Number,
  pageNo: Number,
  pageSize: Number,
  totalPages: Number,
});
console.log(props);

const midStartEnd = computed(() => {
  let start = 1; //中间起始页码
  let continuity = 5; //连续显示数
  let end = 0; //中间结束页码
  if (continuity > props.totalPages) {
    start = 1;
    end = props.totalPages;
  } else {
    start = props.pageNo - parseInt(continuity / 2);
    end = props.pageNo + parseInt(continuity / 2);
    if (start < 1) {
      start = 1;
      end = continuity;
    }
    if (end > props.totalPages) {
      end = props.totalPages;
      start = props.totalPages - continuity + 1;
    }
  }
  const midNumber = []; //中间页需要展示页码 循环遍历出来
  for (let i = start; i <= end; i++) {
    midNumber.push(i);
  }
  return midNumber;
});
</script>

<style scoped lang="less">
.page {
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .sui-pagination {
    margin: 0 auto;
    ul {
      li {
        display: inline-block;
        margin-left: 5px;

        button {
          float: left;
          line-height: 18px;
          text-decoration: none;
          border: 1px solid #dbdfe0;
          font-size: 15px;
          border-radius: 5px;
          padding: 10px 20px;
          color: rgb(0, 0, 0);
        }
        &.disabled {
          button {
            background-color: rgb(221, 220, 220) !important;
            cursor: default;
          }
        }
        &.active {
          button {
            background-color: #3498db;
            color: white;
            font-size: 23px;
            font-weight: 500;
            border-color: #3498db;
            cursor: default;
          }
        }
        &.prev {
          button {
            background-color: #fafafa;
          }
        }
        &.dotted {
          i {
            position: relative;
            float: left;
            background-color: #fff;
            font-size: 20px;
            padding: 7px 10px;
            color: rgb(175, 175, 175);
          }
        }
        &.next {
          button {
            background-color: #fafafa;
          }
        }
      }
    }
  }
}
</style>
